{include file="public/layout" /}
<body class="laytp-container">
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div id="search-form" >
	<div class="layui-layer-title">搜索</div>
	<form class="layui-form layui-row layui-col-space16 layui-search-admin">
		<div class="layui-inline">
			<label class="layui-form-label">区域名称</label>
			<div class="layui-input-inline" >
				<input type="text" name="name" placeholder="区域名称" lay-affix="clear" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label"></label>
			<button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">清空</button>
		</div>
	</form>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="test" lay-filter="test"></table>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" onclick="edit(0)">
			添加
		</button>
		<button class="layui-btn layui-btn-sm" onclick="reload()">
			刷新数据
		</button>
		<button class="layui-btn layui-btn-sm" onclick="del()">
			批量删除
		</button>
		<button class="layui-btn layui-btn-sm" data-form-export="{:url('excel')}">
			导出数据
		</button>
		<button class="layui-btn layui-btn-sm" onclick="initjson()">
			初始化地址json文件
		</button>

	</div>
</script>
<script type="text/html" id="barDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<!--        <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>-->
		<a class="layui-btn layui-btn-xs" lay-event="more">
			更多
			<i class="layui-icon layui-icon-down"></i>
		</a>
	</div>
</script>
<script>
	var tableIns
	var datawhere = {};
	layui.use(function(){
		var table = layui.table;
		var dropdown = layui.dropdown;
		var laydate = layui.laydate;
		var form = layui.form;

		// 创建渲染实例
		tableIns = table.render({
			elem: '#test',
			url:'{:url("region")}', // 此处为静态模拟数据，实际使用时需换成真实接口
			where:datawhere,
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter'],
			height: 'full-200', // 最大高度减去其他容器已占有的高度差
			css: [ // 重设当前表格样式
				'.layui-table-tool-temp{padding-right: 145px;}'
			].join(''),
			cellMinWidth: 80,
			totalRow: true, // 开启合计行
			page: true,
			pagebar: '#test-pagebar', // 分页栏模板
			cols: [[
				{type: 'checkbox', fixed: 'left'},
				{field:'id', width:120, title: 'ID'},
				{field:'name', width:120, title: '地区'},
				{field:'level', title:'所在层级',  width:120},
				{field:'parent_id', width:80, title: '上级地区ID'},
				{fixed: 'right', title:'操作', width: 134, minWidth: 125, templet:function (d) {
						var html = '';
						html += '<a class="layui-btn layui-btn-xs" onclick="edit('+d.id+')">编辑</a>';
						html += '<a class="layui-btn layui-btn-xs" onclick="del('+d.id+')">删除</a>';
						return html;
					}}
			]],
			error: function(res, msg){
				console.log(res, msg)
			}
		});

		laydate.render({
			elem: '.demo-table-search-date'
		});
		laydate.render({
			elem: '#laydate-rangeLinked',
			type: 'datetime',
			range: ['#table-search-date-start', '#table-search-date-end'],
			rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
		});
		// 搜索提交
		form.on('submit(demo-table-search)', function(data){
			var field = data.field; // 获得表单字段
			datawhere = field;
			// 执行搜索重载
			table.reload('test', {
				page: {
					curr: 1 // 重新从第 1 页开始
				},
				where: field // 搜索的字段
			});
			//layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
			return false; // 阻止默认 form 跳转
		});
	});
	// function add(){
	// 	layer.open({
	// 		title: '添加',
	// 		type: 2,
	// 		shadeClose: true,
	// 		area: ['100%','100%'],
	// 		scrollbar:false,
	// 		content: '{:url("reg1")}'
	// 	});
	// }
	// function edit(id){
	// 	var url = '/admin/users/detail/id/'+id
	// 	layer.open({
	// 		title: '添加',
	// 		type: 2,
	// 		shadeClose: true,
	// 		area: ['100%','100%'],
	// 		scrollbar:false,
	// 		content: url
	// 	});
	// }
	function reload(){
		layui.table.reload('test', {
			where: {
				abc: 123,
				test: '新的 test1'
			},
		}, true);
	}
	function del(id){
		if(id){
			var ids = [id];
		}else{
			var checkStatus = layui.table.checkStatus('test');
			var data = checkStatus.data;
			var ids = [];
			$.each(data, function(index, value){
				//goods_ids.append(value.goods_id);
				ids.push(value.user_id);
			});
		}
		layer.confirm('确定要删除选择的会员'+ids+'吗？', function(index){
			$.ajax({
				type: "POST",
				url: "{:url('delUser')}",
				data: {ids:ids},
				success: function(res){
					console.log(res);
					if(res.status){
						layer.msg('提交成功');
					}else{
						layer.msg(res.msg);
					}
					layer.close(index);
					tableIns.reload()
				}
			});
			layer.close(index);
			// 向服务端发送删除指令
		});

	}
	function edit(id){
		var recharge_layer = layer.open({type:2,area:['600px','400px'],title:'编辑区域',content:"/admin/Tools/edit_region/id/"+id,shadeClose:true,btn: [],
			yes:function(){
				var index = layer.load();
				$.post("{:url('edit_region')}",{
					user_id:user_id,
					number:$('#recharge_money').val(),
					memo:$('#recharge_remark').val(),
					money_type:$('#recharge_wallet').val()
				},function(res){
					layer.close(index);
					dialog(res.msg,res.status);
					layer.close(recharge_layer);
					tableIns.reload()
				})
			}
		})
	}
	function initjson(){
		layer.confirm('确定要初始化地址文件吗？', function(index){
			var index = layer.load();
			$.ajax({
				type: "POST",
				url: "{:url('initLocationJsonJs')}",
				data: {},
				success: function(res){
					console.log(res);
					if(res.status){
						layer.msg('操作成功');
					}else{
						layer.msg(res.msg);
					}
					layer.close(index);
					tableIns.reload()
				}
			});
			layer.close(index);
			// 向服务端发送删除指令
		});

	}
</script>
</body>
</html>